<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>主题测试页面</span>
      </div>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <h3>主题切换</h3>
          <theme-picker />
          
          <h3>按钮样式测试</h3>
          <el-button type="primary">主要按钮</el-button>
          <el-button type="success">成功按钮</el-button>
          <el-button type="warning">警告按钮</el-button>
          <el-button type="danger">危险按钮</el-button>
          <el-button type="info">信息按钮</el-button>
          
          <h3>表单元素测试</h3>
          <el-form :model="form" label-width="80px">
            <el-form-item label="输入框">
              <el-input v-model="form.name" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="选择器">
              <el-select v-model="form.region" placeholder="请选择">
                <el-option label="选项1" value="1"></el-option>
                <el-option label="选项2" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期选择">
              <el-date-picker v-model="form.date" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        
        <el-col :span="12">
          <h3>表格样式测试</h3>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
          
          <h3>标签页测试</h3>
          <el-tabs v-model="activeName">
            <el-tab-pane label="用户管理" name="first">
              <p>用户管理内容</p>
            </el-tab-pane>
            <el-tab-pane label="配置管理" name="second">
              <p>配置管理内容</p>
            </el-tab-pane>
            <el-tab-pane label="角色管理" name="third">
              <p>角色管理内容</p>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      
      <el-row style="margin-top: 20px;">
        <el-col :span="24">
          <h3>对话框测试</h3>
          <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>
          
          <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>这是一个对话框测试</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import ThemePicker from '@/components/ThemePicker'

export default {
  name: 'ThemeTest',
  components: {
    ThemePicker
  },
  data() {
    return {
      form: {
        name: '',
        region: '',
        date: ''
      },
      tableData: [{
        date: '2023-01-01',
        name: '张三',
        address: '北京市朝阳区'
      }, {
        date: '2023-01-02',
        name: '李四',
        address: '上海市浦东新区'
      }, {
        date: '2023-01-03',
        name: '王五',
        address: '广州市天河区'
      }],
      activeName: 'first',
      dialogVisible: false
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

h3 {
  margin: 20px 0 10px 0;
  color: #303133;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.el-form {
  margin-top: 20px;
}

.el-table {
  margin-top: 10px;
}
</style> 